<template>
  <div class="user-order-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <input type="text" v-model="searchParams.serialNumber" placeholder="输入订单编号查询" @keyup.enter="fetchUserOrderData"
        class="serial-input" />
      <select v-model="searchParams.status" @change="fetchUserOrderData" class="status-select">
        <option value="">全部订单</option>
        <option value="1">未付款</option>
        <option value="2">已付款</option>
        <option value="3">已关闭</option>
      </select>
      <div class="date-filter">
        <span>下单时间：</span>
        <input type="date" v-model="searchParams.startTime" class="date-input" @change="validateTimeRange" />
        <span class="date-separator">-</span>
        <input type="date" v-model="searchParams.endTime" class="date-input" @change="validateTimeRange" />
        <span v-if="timeError" class="time-error">{{ timeError }}</span>
      </div>
      <button class="search-btn" @click="fetchUserOrderData">搜索</button>
      <button class="reset-btn" @click="resetSearch" v-show="hasSearchCondition">
        重置
      </button>
    </div>

    <!-- 加载状态 -->
    <div class="loading-state" v-if="isLoading">
      <p>加载中...</p>
    </div>

    <!-- 订单表格 -->
    <div class="order-table-container" v-else>
      <div class="table-body">
        <!-- 空数据提示 -->
        <div class="empty-state" v-if="orderList.length === 0">
          <p>
            {{ hasSearchCondition ? "没有找到匹配的订单" : "您暂无订单数据" }}
          </p>
        </div>

        <!-- 订单列表 -->
        <div v-for="order in orderList" :key="order.id">
          <div class="table-header">
            <div class="table-cell order-id-column">订单编号</div>
            <div class="table-cell user-column">用户名</div>
            <div class="table-cell address-column">收货地址</div>
            <div class="table-cell time-column">下单时间</div>
            <div class="table-cell amount-column">订单总金额</div>
            <div class="table-cell status-column">订单状态</div>
            <div class="table-cell action-column">操作</div>
          </div>
          <!-- 订单父行 -->
          <div class="table-row order-row">
            <div class="table-cell order-id-column">
              {{ order.serialNumber }}
            </div>
            <div class="table-cell user-column">
              {{ order.loginName || "未知用户" }}
            </div>
            <div class="table-cell address-column">{{ order.userAddress }}</div>
            <div class="table-cell time-column">{{ order.createTime }}</div>
            <div class="table-cell amount-column">¥{{ order.cost }}</div>
            <div class="table-cell status-column">
              <span :class="getStatusTagClass(order.status)">{{ getStatusText(order.status) }}
                <!-- 未付款订单：显示实时倒计时 -->
                <template v-if="order.status === 1">
                  <span class="countdown-tip">
                    剩余支付时间：<span class="countdown-time" :class="{
                      'countdown-expired': getOrderCountdown(order.id)
                        .isExpired,
                    }">
                      {{
                        formatCountdown(
                          getOrderCountdown(order.id).remainingSeconds
                        )
                      }}
                    </span>
                  </span>
                </template>
              </span>
            </div>
            <div class="table-cell action-column">
              <!-- 未付款：支付 + 关闭 -->
              <template v-if="
                order.status === 1 && !getOrderCountdown(order.id).isExpired
              ">
                <button class="operate-btn vx-pay-btn" @click="handleVXPay(order.id)" :disabled="isSubmitting">
                  微信支付
                </button>
                <button class="operate-btn zfb-pay-btn" @click="handlePay(order.id)" :disabled="isSubmitting">
                  支付宝支付
                </button>
                <button class="operate-btn close-btn" @click="handleCloseOrder(order.serialNumber)"
                  :disabled="isSubmitting">
                  关闭
                </button>
              </template>
              <!-- 已付款：退款 -->
              <template v-else-if="order.status === 2">
                <button class="operate-btn refund-btn" @click="openRefundModal(order)" :disabled="isSubmitting">
                  申请退款
                </button>
              </template>
              <!-- 已关闭：删除 -->
              <template v-else-if="order.status === 3 || order.status === 4">
                <button class="operate-btn delete-btn" @click="handleDeleteOrder(order.id)" :disabled="isSubmitting">
                  删除订单
                </button>
              </template>
            </div>
          </div>

          <!-- 订单详情子行 -->
          <div class="detail-row">
            <div class="detail-table">
              <div class="detail-table-header">
                <div class="detail-cell img-column">商品图片</div>
                <div class="detail-cell name-column">商品名称</div>
                <div class="detail-cell quantity-column">购买数量</div>
                <div class="detail-cell price-column">单价（元）</div>
                <div class="detail-cell subtotal-column">小计（元）</div>
              </div>
              <div class="detail-table-body">
                <div class="detail-table-row" v-for="detail in order.easyBuyOrderDetails" :key="detail.id">
                  <div class="detail-cell img-column">
                    <img :src="`http://117.72.153.227/image/${detail.product.fileName || ''}`" alt="商品图片"
                      class="product-img">
                  </div>
                  <div class="detail-cell name-column">{{ detail.product.productName || "未知商品" }}
                  </div>
                  <div class="detail-cell quantity-column">{{ detail.quantity || 0 }}</div>
                  <div class="detail-cell price-column">¥{{ detail.cost / detail.quantity }}</div>
                  <div class="detail-cell subtotal-column">¥{{ detail.cost }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-container" v-if="orderList.length > 0 && !isLoading">
      <button class="page-btn" :disabled="currentPage === 1 || isLoading" @click="goToFirstPage">
        首页
      </button>
      <button class="page-btn" :disabled="currentPage === 1 || isLoading" @click="goToPrevPage">
        上一页
      </button>
      <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button class="page-btn" :disabled="currentPage === totalPages || isLoading" @click="goToNextPage">
        下一页
      </button>
      <button class="page-btn" :disabled="currentPage === totalPages || isLoading" @click="goToLastPage">
        末页
      </button>
      <select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select" :disabled="isLoading">
        <option value="3">每页3条</option>
        <option value="6">每页6条</option>
        <option value="9">每页9条</option>
      </select>
    </div>
    <!-- 微信支付弹窗 -->
    <div class="wxPay-div" v-if="showVXCode">
      <h2>微信支付</h2>
      <div class="qrcode-container">
        <img ref="qrcodeImg" :src="qrcode" />
      </div>
      <p class="order-no">订单号: {{ currentOrderNo }}</p>
      <button class="close-btn" @click="showVXCode = false">关闭</button>
    </div>
    <!-- 退款申请弹窗 -->
    <div class="refund-modal-overlay" v-if="refundModalVisible">
      <div class="refund-modal">
        <div class="modal-header">
          <h3>申请退款</h3>
          <button class="close-btn" @click="closeRefundModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="order-info">
            <p>
              <span class="label">订单编号：</span>{{ refundOrder.order.serialNumber }}
            </p>
            <p>
              <span class="label">订单总金额：</span><span class="total-amount">¥{{ refundOrder.order.cost }}</span>
            </p>
            <p class="tip">退款金额不能超过订单总金额，支持两位小数</p>
          </div>
          <div class="refund-form">
            <div class="form-item">
              <label for="refundAmount">退款金额（元）：</label>
              <input type="number" id="refundAmount" v-model.number="refundForm.amount" step="0.01" min="0.01"
                @input="validateRefundAmount" class="form-input" placeholder="请输入退款金额" />
              <span v-if="refundAmountError" class="error-text">{{
                refundAmountError
              }}</span>
            </div>
            <div class="form-item">
              <label for="refundReason">退款原因：</label>
              <textarea id="refundReason" v-model="refundForm.reason" class="form-textarea" placeholder="请输入退款原因（必填）"
                rows="3"></textarea>
              <span v-if="refundReasonError" class="error-text">{{
                refundReasonError
              }}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="closeRefundModal" :disabled="isSubmitting">
            取消
          </button>
          <button class="confirm-btn" @click="submitRefund" :disabled="isSubmitting || !isRefundFormValid">
            提交申请
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import QRCode from "qrcode";

export default {
  name: "UserOrderList",
  data() {
    return {
      selectedPaymentMethod: null,
      isPaying: false,
      showVXCode: false,
      qrcode: "",
      orderList: [],
      currentOrderNo: "",
      currentPage: 1,
      pageSize: 3,
      totalPages: 0,
      isLoading: false,
      isSubmitting: false,
      timeError: "",
      searchParams: {
        serialNumber: "",
        status: "",
        startTime: "",
        endTime: "",
      },
      // 退款弹窗相关
      refundModalVisible: false,
      refundOrder: {},
      refundForm: { amount: "", reason: "" },
      refundAmountError: "",
      refundReasonError: "",
      // 用于触发计算属性的当前时间（毫秒时间戳）
      currentTime: new Date().getTime(),
      // 时间更新定时器
      timeTimer: null,
    };
  },
  computed: {
    // 是否有搜索条件
    hasSearchCondition() {
      return Object.values(this.searchParams).some(
        (val) => val !== "" && val !== undefined
      );
    },
    // 退款表单是否合法
    isRefundFormValid() {
      return (
        !this.refundAmountError &&
        !this.refundReasonError &&
        this.refundForm.amount > 0 &&
        this.refundForm.reason.trim() !== ""
      );
    },
    // 未付款订单 + 实时倒计时信息
    unpaidOrdersWithCountdown() {
      return this.orderList
        .filter((order) => order.status === 1)
        .map((order) => {
          // 解析订单创建时间
          const createTime = new Date(order.createTime).getTime();
          // 计算过期时间
          const expireTime = createTime + 20 * 60 * 1000;
          // 计算剩余时间
          const remainingSeconds = Math.max(
            Math.floor((expireTime - this.currentTime) / 1000),
            0
          );
          // 是否过期
          const isExpired = remainingSeconds <= 0;

          return { ...order, remainingSeconds, isExpired, expireTime };
        });
    },
  },
  mounted() {
    // 每秒更新当前时间，触发计算属性刷新倒计时
    this.timeTimer = setInterval(() => {
      this.currentTime = new Date().getTime();
    }, 1000);
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timeTimer) clearInterval(this.timeTimer);
  },
  methods: {
    async fetchUserOrderData() {
      this.validateTimeRange();
      if (this.timeError) {
        return;
      }

      this.isLoading = true;
      try {
        var params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          serialNumber:
            this.searchParams.serialNumber === ""? undefined: this.searchParams.serialNumber,
          startTime:
            this.searchParams.startTime === ""? undefined: this.searchParams.startTime,
          endTime:
            this.searchParams.endTime === ""? undefined: this.searchParams.endTime,
          status:
            this.searchParams.status === ""? undefined: this.searchParams.status,
        };

        // 发起请求
        var response = await axios.get("/api/order/getAllOrder", {
          params: params,
        });
        var pageInfo = response.data.pageInfo;

        // 处理订单列表
        this.totalPages = pageInfo.pages;
        this.orderList = pageInfo.list || [];

        // 无订单提示
        if (this.orderList.length === 0) {
          this.$message.info("暂无订单记录");
        }
      } catch (error) {
        this.$message.error("获取订单列表失败");
      } finally {
        this.isLoading = false;
        this.checkAndCloseExpiredOrders();
      }
    },

    // 验证时间范围
    validateTimeRange() {
      this.timeError = "";
      const { startTime, endTime } = this.searchParams;
      if (startTime && endTime) {
        const start = new Date(startTime);
        const end = new Date(endTime);
        if (start > end) this.timeError = "开始时间不能晚于结束时间";
      }
    },
    // 重置搜索
    resetSearch() {
      this.searchParams = {
        serialNumber: "",
        status: "",
        startTime: "",
        endTime: "",
      };
      this.timeError = "";
      this.currentPage = 1;
      this.fetchUserOrderData();
    },
    // 根据订单ID获取倒计时信息
    getOrderCountdown(orderId) {
      const countdown = this.unpaidOrdersWithCountdown.find(
        (item) => item.id === orderId
      );
      return countdown || { remainingSeconds: 0, isExpired: true };
    },
    // 格式化倒计时
    formatCountdown(seconds) {
      if (seconds === undefined || seconds <= 0) return "00:00";
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      const formatNum = (num) => num.toString().padStart(2, "0");
      return `${formatNum(mins)}:${formatNum(secs)}`;
    },
    // 检查并自动关闭所有已过期订单
    checkAndCloseExpiredOrders() {
      const expiredOrders = this.unpaidOrdersWithCountdown.filter(
        (order) => order.isExpired
      );
      expiredOrders.forEach((order) => {
        setTimeout(() => this.autoCloseExpiredOrder(order.id), 100);
      });
    },
    // 自动关闭过期订单
    async autoCloseExpiredOrder(orderId) {
      const order = this.orderList.find((item) => item.id === orderId);
      if (!order || order.status !== 1) return;

      this.isSubmitting = true;
      try {
        await axios.get(`/api/order/closeOrder/${orderId}`);
        this.$message.success(
          `订单${order.serialNumber}因超时未支付已自动关闭`
        );
        this.fetchUserOrderData();
      } catch (error) {
        console.error(`自动关闭订单${orderId}失败`, error);
        this.$message.error(
          `订单自动关闭失败：${error.response?.data?.message || "系统异常"}`
        );
      } finally {
        this.isSubmitting = false;
      }
    },
    // 支付订单
    async handlePay(orderId) {
      const currentOrder = this.orderList.find((order) => order.id === orderId);
      if (!confirm("确认支付此订单吗？支付后将无法取消")) return;
      this.isSubmitting = true;

      try {
        const payParam = {
          outTradeNo: currentOrder.serialNumber,
          totalAmount: currentOrder.totalAmount,
          subject: `订单-${currentOrder.serialNumber}`,
          storeId: 2088721078459920,
        };
        const response = await axios.post("/api/alipay/pay", payParam);
        this.$message.success("支付已发起，请在新打开的页面完成支付");
        const payResponse = await this.handlegotoPay(response.data);
        if (payResponse.code === 500) {
          this.$message.success(payResponse.msg);
          return;
        }
        this.$message.success("支付完成");
      } finally {
        this.isSubmitting = false;
      }
    },

    async handleVXPay(orderId) {
      const currentOrder = this.orderList.find((order) => order.id === orderId);
      if (!confirm(`确认当前支付订单吗？`)) return;

      this.isSubmitting = true;
      try {
        const payParam = {
          outTradeNo: currentOrder.serialNumber,
          Description: `订单-${currentOrder.serialNumber}`,
        };

        const response = await axios.post("/api/VXpay/VXPayment", payParam);
        this.currentOrderNo = currentOrder.serialNumber;

        // 先显示弹窗
        this.showVXCode = true;

        await this.$nextTick();

        // 再生成二维码
        await this.generateQRCode(response.data.pay_url);

        this.$message.success("请扫描二维码完成支付");
      } catch (error) {
        this.$message.error(`支付请求失败: ${error.message}`);
      } finally {
        this.isSubmitting = false;
      }
    },
    // 在获取到 pay_url 后生成二维码
    async generateQRCode(payUrl) {
      try {
        // 确保ref存在
        if (!this.$refs.qrcodeImg) {
          throw new Error("二维码容器未准备好");
        }

        const qrDataUrl = await QRCode.toDataURL(payUrl, {
          width: 200,
          margin: 1,
          color: {
            dark: "#000000",
            light: "#FFFFFF",
          },
          errorCorrectionLevel: "H",
        });
        this.qrcode = qrDataUrl;
      } catch (error) {
        console.error("二维码生成失败:", error);
        this.$message.error("二维码生成失败");
        // 失败时关闭弹窗
        this.showVXCode = false;
        throw error;
      }
    },
    // 跳转支付页面
    async handlegotoPay(data) {
      const formHtml = data.form;
      const tempDiv = document.createElement("div");
      tempDiv.innerHTML = formHtml;
      document.body.appendChild(tempDiv);
      const payForm = tempDiv.querySelector('form[name="punchout_form"]');
      if (!payForm) {
        document.body.removeChild(tempDiv);
        throw new Error("支付表单不存在，无法发起支付");
      }
      payForm.submit();
      setTimeout(() => {
        if (document.body.contains(tempDiv)) document.body.removeChild(tempDiv);
      }, 1000);
    },
    // 手动关闭订单
    async handleCloseOrder(serialNumber) {
      if (!confirm("确认关闭此未付款订单吗？关闭后订单将无法恢复")) return;
      this.isSubmitting = true;
      try {
        await axios.get(`/api/order/closeOrder/${serialNumber}`);
        this.$message.success("订单已成功关闭");
        this.fetchUserOrderData();
      } catch (error) {
        this.$message.error(
          `关闭失败：${error.response?.data?.message || "系统异常"}`
        );
      } finally {
        this.isSubmitting = false;
      }
    },
    // 删除已关闭订单
    async handleDeleteOrder(orderId) {
      if (!confirm("确认删除此已关闭订单吗？删除后将无法查看订单详情")) return;
      this.isSubmitting = true;
      try {
        await axios.delete(`/api/order/deleteOrder/${orderId}`);
        this.$message.success("订单已成功删除");
        this.fetchUserOrderData();
      } catch (error) {
        this.$message.error(
          `删除失败：${error.response?.data?.message || "系统异常"}`
        );
      } finally {
        this.isSubmitting = false;
      }
    },
    // 打开退款弹窗
    openRefundModal(order) {
      console.log("打开退款弹窗", order);
      this.refundOrder = { order };
      console.log("打开退款弹窗", this.refundOrder);
      this.refundForm = { amount: "", reason: "" };
      this.refundAmountError = "";
      this.refundReasonError = "";
      this.refundModalVisible = true;
    },
    // 关闭退款弹窗
    closeRefundModal() {
      this.refundModalVisible = false;
      document.body.style.overflow = "auto";
    },
    // 验证退款金额
    validateRefundAmount() {
      const { amount } = this.refundForm;
      const maxAmount = this.refundOrder.order.cost;
      this.refundAmountError = "";
      if (isNaN(amount)) {
        this.refundAmountError = "请输入有效的数字";
      } else if (amount <= 0) {
        this.refundAmountError = "退款金额必须大于0";
      } else if (amount > maxAmount) {
        this.refundAmountError = `退款金额不能超过订单总金额（¥${maxAmount.toFixed(
          2
        )}）`;
      } else if (amount.toString().split(".")[1]?.length > 2) {
        this.refundAmountError = "退款金额最多支持两位小数";
      }
    },
    // 验证退款原因
    validateRefundReason() {
      const { reason } = this.refundForm;
      this.refundReasonError = reason.trim() === "" ? "退款原因不能为空" : "";
    },
    // 提交退款申请
    async submitRefund() {
      this.validateRefundAmount();
      this.validateRefundReason();
      if (!this.isRefundFormValid) return;

      this.isSubmitting = true;
      try {
        console.log(this.refundOrder);
        const response = await axios.post("/api/alipay/orderRefund", {
          orderId: this.refundOrder.order.id,
          refundAmount: this.refundForm.amount,
          refundReason: this.refundForm.reason.trim(),
        });
        this.$message.success("退款申请已提交，等待处理");
        this.closeRefundModal();
        if (response.data.code == 500) {
          this.$message.error(response.data.msg);
        }
        this.fetchUserOrderData();
      } catch (error) {
        this.$message.error(
          `退款失败：${error.response?.data?.message || "系统异常"}`
        );
      } finally {
        this.isSubmitting = false;
      }
    },
    // 分页相关方法
    goToFirstPage() {
      if (this.currentPage > 1) {
        this.currentPage = 1;
        this.fetchUserOrderData();
      }
    },
    goToPrevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchUserOrderData();
      }
    },
    goToNextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchUserOrderData();
      }
    },
    goToLastPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage = this.totalPages;
        this.fetchUserOrderData();
      }
    },
    handlePageSizeChange() {
      this.currentPage = 1;
      this.fetchUserOrderData();
    },
    // 获取订单状态文本
    getStatusText(status) {
      const statusMap = { 1: "未付款", 2: "已付款", 3: "已关闭", 4: "已退款" };
      return statusMap[status] || "未知状态";
    },
    // 获取订单状态标签样式
    getStatusTagClass(status) {
      const classMap = {
        1: "status-tag pending",
        2: "status-tag paid",
        3: "status-tag closed",
        4: "status-tag refunded",
      };
      return classMap[status] || "status-tag default";
    },
  },
  created() {
    this.fetchUserOrderData();
  },
};
</script>

<style scoped>
/* 基础容器 */
.user-order-container {
  padding: 15px;
  max-width: 1500px;
  margin: 0 auto;
  font-family: "Microsoft YaHei", sans-serif;
  background-color: #fafafa;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.serial-input {
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 13px;
  min-width: 180px;
  flex: 1;
}

.status-select {
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 13px;
  min-width: 120px;
}

.date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}

.date-input {
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 13px;
  min-width: 140px;
}

.date-separator {
  color: #999;
}

.time-error {
  color: #ff4d4f;
  font-size: 12px;
  white-space: nowrap;
}

.search-btn {
  padding: 8px 16px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.search-btn:hover {
  background: #359469;
}

.reset-btn {
  padding: 8px 16px;
  background: #fff;
  color: #666;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.3s;
}

.reset-btn:hover {
  border-color: #42b983;
  color: #42b983;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #666;
}

/* 订单表格容器 */
.order-table-container {
  width: 80%;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 表格标题 */
.table-header {
  display: flex;
  background: #f9f9f9;
  font-weight: 500;
  color: #666;
  font-size: 13px;
  border-bottom: 1px solid #eee;
}

/* 表格单元格基础样式 */
.table-cell {
  padding: 12px 8px;
  line-height: 1.5;
  font-size: 13px;
  color: #333;
  display: flex;
  align-items: center;
}

/* 表头列宽 */
.order-id-column {
  width: 255px;
  flex-shrink: 0;
  color: #666;
}

.user-column {
  width: 120px;
  flex-shrink: 0;
}

.address-column {
  flex: 1;
  min-width: 130px;
}

.time-column {
  width: 160px;
  flex-shrink: 0;
  color: #666;
}

.amount-column {
  width: 80px;
  flex-shrink: 0;
  color: #ff5722;
  font-weight: 500;
}

.status-column {
  width: 80px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
}

.action-column {
  width: 200px;
  flex-shrink: 0;
  justify-content: center;
  gap: 8px;
}

/* 订单父行 */
.table-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

/* 状态标签 */
.status-tag {
  padding: 3px 8px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}

.status-tag.pending {
  background: #fff4e5;
  color: #fa8c16;
}

.status-tag.paid {
  background: #e8f5e9;
  color: #42b983;
}

.status-tag.closed {
  background: #f5f5f5;
  color: #999;
}

.status-tag.refunding {
  background: #e3f2fd;
  color: #2196f3;
}

.status-tag.refunded {
  background: #ffebee;
  color: #ff5722;
}

/* 倒计时样式 */
.countdown-tip {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #ff5722;
}

.countdown-expired {
  color: #999;
  text-decoration: line-through;
}

/* 操作按钮 */
.operate-btn {
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  border: none;
}

.operate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vx-pay-btn {
  background: #42b983;
  color: #fff;
}

.zfb-pay-btn {
  background: blue;
  color: #fff;
}

.pay-btn:hover {
  background: #359469;
}

.close-btn {
  background: #fa8c16;
  color: #fff;
}

.close-btn:hover {
  background: #e07b10;
}

.refund-btn {
  background: #ff5722;
  color: #fff;
}

.refund-btn:hover {
  background: #e04a0f;
}

.delete-btn {
  background: #999;
  color: #fff;
}

.delete-btn:hover {
  background: #7a7a7a;
}

/* 空数据提示 */
.empty-state {
  padding: 60px 0;
  text-align: center;
  color: #999;
  border-bottom: 1px solid #f0f0f0;
}

/* 订单详情行 */
.detail-row {
  background-color: #fafafa;
  border-bottom: 1px solid #eee;
}

.detail-table {
  width: 100%;
  padding: 16px;
}

.detail-table-header {
  display: flex;
  background-color: #f0f0f0;
  border-radius: 4px 4px 0 0;
  font-weight: 500;
  color: #333;
}

.detail-table-body {
  border: 1px solid #eee;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.detail-table-row {
  display: flex;
  border-bottom: 1px solid #eee;
}

.detail-table-row:last-child {
  border-bottom: none;
}

.detail-cell {
  padding: 12px 16px;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

/* 详情列宽 */
.img-column {
  width: 80px;
  flex-shrink: 0;
  justify-content: center;
}

.name-column {
  flex: 2;
  min-width: 200px;
}

.quantity-column {
  width: 100px;
  flex-shrink: 0;
  justify-content: center;
  color: #666;
}

.price-column {
  width: 120px;
  flex-shrink: 0;
  justify-content: center;
  color: #666;
}

.subtotal-column {
  width: 120px;
  flex-shrink: 0;
  justify-content: center;
  color: #ff5722;
  font-weight: 500;
}

/* 商品图片 */
.product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* 分页控件 */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 0;
  color: #666;
}

.page-btn {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) {
  border-color: #42b983;
  color: #42b983;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-info {
  font-size: 13px;
}

.page-size-select {
  padding: 6px 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
}

/* 退款弹窗样式 */
.refund-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.refund-modal {
  width: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.modal-header .close-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.modal-header .close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.order-info {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #eee;
}

.order-info .label {
  color: #666;
  display: inline-block;
  width: 80px;
}

.order-info .total-amount {
  color: #ff5722;
  font-weight: 500;
}

.order-info .tip {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}

.refund-form .form-item {
  margin-bottom: 16px;
}

.refund-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #42b983;
}

.form-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 14px;
  resize: none;
  box-sizing: border-box;
}

.error-text {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #ff4d4f;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.cancel-btn:hover {
  border-color: red;
}

.confirm-btn {
  padding: 8px 16px;
  background: #ff5722;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
}

.confirm-btn:disabled {
  background: #ffb8a6;
  cursor: not-allowed;
}

.confirm-btn:hover:not(:disabled) {
  background: #e04a0f;
}

.wxPay-div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
  z-index: 2000;
}

.qrcode-container {
  margin: 15px 0;
  padding: 10px;
  background: white;
  border: 1px solid #eee;
}

.order-no {
  color: #666;
  margin: 10px 0;
}

.close-btn:hover {
  background: #eee;
}
</style>